<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jquery弹出层特效代码</title>
		<link rel="stylesheet" href="font/iconfont.css">
		<link href="font/icon.css?_t=20240103015136" rel="stylesheet" type="text/css" />
		<link href="css/canvas_css.css?_t=20240103015136" rel="stylesheet" type="text/css" />
    <style>
			#container,
			#mass_container {
				border: 2px solid gray;
				position: relative;
				border-radius: 2px;
			}
      #myHiddenDiv {
        display: none;
      }
      .popup {
        border: 1px solid #ccc;
        background-color: #fff;
        padding-bottom: 10px;
      }
      .popup a:hover {
        text-decoration: none;
        color: #fff;
      }
      .popup-header {
        padding-top: 1px;
        height: 30px;
        line-height: 15px;
        background-color: #e7e7e7;
      }
      .popup-header h2 {
        font-size: 14px;
        width: 100%;
        text-align: center;
      }
      .popup-body {
        width: 100%;
      }
      a.close {
        display: block;
        color: #fff;
        text-decoration: none;
        font-size: 12px;
        font-weight: 700;
        background: url(images/b1-bg07.gif) no-repeat;
        width: 156px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        margin: 0 auto;
      }
			/*@font-face {
				font-family: 'iconfont';
				src: url('http://at.alicdn.com/t/c/font_4309744_16o0o1gw7xq.woff2?t=1704184956634') format('woff2'),
						url('http://at.alicdn.com/t/c/font_4309744_16o0o1gw7xq.woff?t=1704184956634') format('woff'),
						url('http://at.alicdn.com/t/c/font_4309744_16o0o1gw7xq.ttf?t=1704184956634') format('truetype');
			}
			.iconfont{
				font-family: "iconfont" !important;
				font-family: 16px;
			}*/
			@font-face {
				font-family: "iconfont";
				src: url('font/iconfont.woff2?t=1704186039032') format('woff2'),
						url('font/iconfont.woff?t=1704186039032') format('woff'),
						url('font/iconfont.ttf?t=1704186039032') format('truetype');
			}

			.icon-shanchu:before {
  content: "\e8c1";
}

.icon-Pdf:before {
  content: "\e733";
}

.icon-morentouxiang:before {
  content: "\e8c9";
}

.icon-guanbi:before {
  content: "\eb6a";
}

.icon-shangchuanwenjian:before {
  content: "\e621";
}

.icon-duihua:before {
  content: "\e626";
}

.icon-sousuo:before {
  content: "\eafe";
}

.icon-dianzan:before {
  content: "\ec7f";
}

.icon-jiaohu:before {
  content: "\e619";
}

.icon-wenda:before {
  content: "\e6f6";
}

.icon-fasong:before {
  content: "\e6c8";
}

.icon-fuzhi:before {
  content: "\e612";
}

.icon-chaping:before {
  content: "\e659";
}


			/* @font-face {
			font-family: "aliIconfont";
			src: url('font/iconFont/iconfont.eot');
			
			src: url('font/iconFont/iconfont.eot#iefix') format('embedded-opentype'), url('font/iconFont/iconfont.ttf') format('truetype'), url('font/iconFont/iconfont.woff') format('woff'), url('font/iconFont/iconfont.svg#iconfont') format('svg');
			
		}
		.aliIconfont {
			font-family: "aliIconfont";
			font-style: normal;
			-webkit-font-smoothing: antialiased;
			-webkit-text-stroke-width: 0.2px;
			-moz-osx-font-smoothing: grayscale;
		}
		.aliIconfont.jiansheBank:before {
			content: "\e633";
			color: #0066B3;
			font-size: .23rem;
		}
		.aliIconfont.zhongxinBank:before {
			content: "\e664";
			color: #D7000F;
			font-size: .23rem;
		}
		.aliIconfont.gongshangBank:before {
			content: "\e640";
			color: #E50112;
			font-size: .23rem;
		}
		.aliIconfont.nongyeBank:before {
			content: "\e610";
			color: #008566;
			font-size: 0.23rem;
		}
		.aliIconfont.beijingBank:before {
			content: "\e70e";
			color: #C11E23;
			font-size: 0.23rem;
		}
		.aliIconfont.xingyeBank:before {
			content: "\e6f5";
			color: #004186;
			font-size: 0.23rem;
		}
		.aliIconfont.jiaotongBank:before {
			content: "\e6f3";
			color: #0A4A9D;
			font-size: 20px;
		}
		.aliIconfont.zhaoshangBank:before {
			content: "\e780";
			color: #E41E26;
			font-size: 0.27rem;
		}
		.aliIconfont.youzhengBank:before {
			content: "\e60e";
			color: #007E3E;
			font-size: 0.23rem;
		}
		.aliIconfont.guangdaBank:before {
			content: "\e627";
			color: #E7A700;
			font-size: 0.23rem;
		}
		.aliIconfont.pufaBank:before {
			content: "\e641";
			color: #2D5082;
			font-size: 0.23rem;
		}
		.aliIconfont.pinganBank:before {
			content: "\e686";
			color: #FF6100;
			font-size: 0.23rem;
		}
		.aliIconfont.guangfaBank:before {
			content: "\e60a";
			color: #E41E26;
			font-size: 0.23rem;
		}
		.aliIconfont.shanghaiBank:before {
			content: "\e609";
			color: #FCFCFC;
			font-size: 0.23rem;
		}
		.aliIconfont.zhongguorenmingBank:before {
			content: "\e67e";
			color: #EE2A24;
			font-size: 0.23em;
		}
		.aliIconfont.zhongguoBank:before {
			content: "\e6fb";
			color: #EE2A24;
			font-size: .33rem;
		}
		.aliIconfont.Bank:before {
			content: "\e60f";
			color: #0066B3;
			font-size: 0.23rem;
		}
		.aliIconfont.guanbi:before {
			content: "\e675";
			font-size: .2rem;
			color: #0c7adc;
			margin-left: .1rem;
			margin-top: .1rem;
		}
		.bank_icon {
			margin-top: .2rem;
		} */
    </style>
		<script>
			localStorage.setItem('zco-csl-sharer-cscode', '');
		</script>
		<script type="text/javascript" src="csl-sharer.js"></script>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jmpopups.js"></script>
    <script type="text/javascript">
      $.setupJMPopups({ screenLockerBackground: "url(images/_2023_04_03_filename1.png)" });
      function openStaticPopup() {
        $.openPopupLayer({
          name: 'myStaticPopup',
          width: 600,
          target: 'myHiddenDiv',
        });
      }
    </script>
		<script>
			// localStorage.setItem('zco-csl-sharer-cscode', '');
			window.addEventListener('load', function () {
				console.log('load')
				//   if (!location.href.includes("pagethree")) {
				// window.CslSharer.init(API_HOST, {
				// 	keepMarkTime: 4000, // 显示笔迹持续时间，毫秒
				// 	zIndex: 2001, // 标注工具层级
				// });
				// window.CslSharer.init('http://10.30.44.127:3000', {keepMarkTime: 4000,zIndex: 2000,});
				window.CslSharer.init('https://lfyyzcss-sit.cpic.com.cn/tp', {keepMarkTime: 4000,zIndex: 2000,});
				//   }
			});
		</script>
  </head>
  <body>
		<input type="file" class="csl-uninteractable-"/>
		<div class="csl-uninteractable-">
			<input type="text"/>
		</div>
		<div id="container" onmousedown="return false;" class="csl-uninteractable-" style="margin-top: 10px;">
			<canvas id="anysignCanvas" width="375" height="466">
			</canvas>
		</div>
		
		<input id="btnClear" type="button" class="button orange" value="清 屏" onclick="clear_canvas();">
		<div>
		<br/>
		<i class="iconfont icon-shanchu"></i>
		<i class="aliIconfont jiaotongBank"></i>
    <a href="javascript:;" onclick="openStaticPopup()">点击这里看看</a
    ><br /><br />
	</div>
    <div id="myHiddenDiv">
      <div class="popup">
        <div class="popup-header"><h2>测试弹出层</h2></div>
        <div class="popup-body">
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
        </div>
        <a
          href="javascript:;"
          class="close"
          onclick="$.closePopupLayer('myStaticPopup')"
          title="关闭窗口"
          >阅读完毕，关闭窗口</a
        >
      </div>
    </div>
		<script>
			 window.addEventListener("load", function () {
				this.setTimeout(() => {
					addCanvasClass();
				}, 1000)
			});

function addCanvasClass() {
	console.log('addCanvasClass')
const tmp_canvas = document.getElementById('tmp_canvas');
if (tmp_canvas) {
tmp_canvas.classList.add('zco-ignore');
} else {
this.setTimeout(() => {
addCanvasClass();
}, 1000);
}
}
			window.addEventListener("load", function() {
					onload_singleSignCanvas()
			});
			var points = [], minX = 9999, minY = 9999, maxX = 0, maxY = 0, curX = 0, curY = 0, lastX = 0, lastY = 0, paste_padding = 10, imageDataTmp, isDown = !1, isDrawn = !1, isCopyingImg = !1, isAnysignInputDlgShown = !1, base_stroke_width = getWindowWidth() >= 480 ? 5 : 2.5, tmp_canvas, tmp_ctx, signResCallback, signObjTmp, mass_tmp_canvas, mass_tmp_ctx;
			var onPaint = function() {
    if (points.length < 3) {
        var t = points[0];
        return tmp_ctx.beginPath(),
        tmp_ctx.arc(t.x, t.y, tmp_ctx.lineWidth / 2, 0, 2 * Math.PI, !0),
        tmp_ctx.fill(),
        void tmp_ctx.closePath()
    }
    tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height),
    tmp_ctx.beginPath(),
    tmp_ctx.moveTo(points[0].x, points[0].y);
    for (var e = 1; e < points.length - 2; e++) {
        var n = (points[e].x + points[e + 1].x) / 2
          , a = (points[e].y + points[e + 1].y) / 2;
        tmp_ctx.quadraticCurveTo(points[e].x, points[e].y, n, a)
    }
    tmp_ctx.quadraticCurveTo(points[e].x, points[e].y, points[e + 1].x, points[e + 1].y),
    tmp_ctx.stroke(),
    isDrawn = !0
}, mass_onPaint = function() {
    if (points.length < 3) {
        var t = points[0];
        return mass_tmp_ctx.beginPath(),
        mass_tmp_ctx.arc(t.x, t.y, mass_tmp_ctx.lineWidth / 2, 0, 2 * Math.PI, !0),
        mass_tmp_ctx.fill(),
        void mass_tmp_ctx.closePath()
    }
    mass_tmp_ctx.clearRect(0, 0, mass_tmp_canvas.width, mass_tmp_canvas.height),
    mass_tmp_ctx.beginPath(),
    mass_tmp_ctx.moveTo(points[0].x, points[0].y);
    for (var e = 1; e < points.length - 2; e++) {
        var n = (points[e].x + points[e + 1].x) / 2
          , a = (points[e].y + points[e + 1].y) / 2;
        mass_tmp_ctx.quadraticCurveTo(points[e].x, points[e].y, n, a)
    }
    mass_tmp_ctx.quadraticCurveTo(points[e].x, points[e].y, points[e + 1].x, points[e + 1].y),
    mass_tmp_ctx.stroke(),
    isDrawn = !0
}, JQuery_Capable = {
    offset: function(t) {
        var e, n, a = "undefined", i = {
            top: 0,
            left: 0
        }, o = t, s = o && o.ownerDocument;
        return s ? (e = s.documentElement,
        typeof o.getBoundingClientRect !== a && (i = o.getBoundingClientRect()),
        n = JQuery_Capable.getWindow(s),
        {
            top: i.top + (n.pageYOffset || e.scrollTop) - (e.clientTop || 0),
            left: i.left + (n.pageXOffset || e.scrollLeft) - (e.clientLeft || 0)
        }) : void 0
    },
    getWindow: function(t) {
        return JQuery_Capable.isWindow(t) ? t : 9 === t.nodeType ? t.defaultView || t.parentWindow : !1
    },
    isWindow: function(t) {
        return null != t && t == t.window
    }
}, isIe = document.all ? !0 : !1, messContent;
function AnySignApi() {
    this.CALLBACK_TYPE_SIGNATURE = 1,
    this.CALLBACK_TYPE_DIALOG_DISMISS = 2,
    this.CALLBACK_TYPE_DIALOG_CANCEL = 3,
    this.CALLBACK_TYPE_BUFFER_SAVED = 4,
    this.CALLBACK_TYPE_ON_PICTURE_TAKEN = 5,
    this.CALLBACK_TYPE_DATA_DELETED = 6,
    this.CALLBACK_TYPE_START_RECORDING = 7,
    this.CALLBACK_TYPE_STOP_RECORDING = 8,
    this.CALLBACK_TYPE_ON_MEDIA_DATA = 9,
    this.CALLBACK_TYPE_ERROR = -1,
    this.CALLBACK_TYPE_ERROR_PICTURE = -2,
    this.CALLBACK_TYPE_OPERATION_CANCELED = -3,
    this.CALLBACK_TYPE_GETVERSION = 10,
    this.RESULT_OK = 0,
    this.RESULT_ERROR = -1,
    this.EC_API_NOT_INITED = 1,
    this.EC_WRONG_CONTEXT_ID = 2,
    this.EC_CAMERA_INIT_FAILED = 3,
    this.EC_NATIVE_EXCEPTION = 4,
    this.EC_DEVICE_NOT_SUPPORTED = 5,
    this.EC_TEMPLATE_NOT_SET = 6,
    this.initAnySignApi = function(t, i) {
        return t && t instanceof Function && t.length >= 3 ? (core = new anysignWebImpl,
        core._initAnySignApi(t, i),
        !0) : !1
    }
    ,
    this.addDataObj = function(t, i) {
        return !i instanceof DataObj ? !1 : core._addDataObj(t, i)
    }
    ,
    this.addSignatureObj = function(t, i) {
        return !i instanceof SignatureConfig ? !1 : core._addSignatureObj(t, i)
    }
    ,
    this.addChachetObj = function() {
        return !0
    }
    ,
    this.addPhotoObj = function(t, i) {
        return !i instanceof PhotoConfig || !t instanceof Array || 0 == t.length ? !1 : !0
    }
    ,
    this.addMediaObj = function(t, i) {
        return !i instanceof MediaConfig || !t instanceof Array || 0 == t.length ? !1 : !0
    }
    ,
    this.setTableData = function(t, i, e, s, n) {
        return t && i && e && n ? !0 : !1
    }
    ,
    this.setTID = function(t) {
        return core._setTID(t)
    }
    ,
    this.setData = function(t, i) {
        return core._setData(t, i)
    }
    ,
    this.showSignatureDialog = function(t) {
        return core._showSignatureDialog(t)
    }
    ,
    this.takePicture = function() {
        return !1
    }
    ,
    this.startMediaRecording = function() {
        return !1
    }
    ,
    this.finishMediaRecording = function() {
        return !1
    }
    ,
    this.commitConfig = function() {
        return core._commitConfig()
    }
    ,
    this.resetConfig = function() {
        return core._resetConfig()
    }
    ,
    this.isReadyToUpload = function() {
        return core._isReadyToUpload()
    }
    ,
    this.getEncodedSignData = function() {
        return core._getEncodedSignData()
    }
    ,
    this.getVersion = function() {
        return "anysign web v1.0"
    }
    ,
    this.getOSInfo = function() {
        return core._getOSInfo()
    }
}
			function onload_singleSignCanvas() {
				if (document.getElementById("anysignCanvas")) {
						var t = document.getElementById("anysignCanvas")
							, e = t.getContext("2d")
							, n = getWindowHeight()
							, a = getWindowWidth();
						t.width = a,
						t.height = .7 * n;
						// var i = document.getElementById("anysign_title");
						// i.style.height = .1 * n;
						// var o = document.getElementById("btnContainerOuter");
						// o.style.height = .2 * n;
						var s = window.devicePixelRatio ? window.devicePixelRatio : 1
							, c = t.width * t.height / 142560;
						base_stroke_width = s * c * 1.5;
						var m = document.getElementById("container");
						tmp_canvas = document.createElement("canvas"),
						tmp_ctx = tmp_canvas.getContext("2d"),
						tmp_canvas.id = "tmp_canvas",
						tmp_canvas.width = t.width,
						tmp_canvas.height = t.height;
						m.appendChild(tmp_canvas),
						"ontouchstart"in document.documentElement ? (tmp_canvas.ontouchstart = function(t) {
								return isCopyingImg ? !1 : (t.preventDefault(),
								isDown = !0,
								t.touches && (t = t.touches[0]),
								!1)
						}
						,
						tmp_canvas.ontouchmove = function(t) {
								if (isDown && !isCopyingImg) {
										var e = JQuery_Capable.offset(t.target);
										"undefined" != typeof t.targetTouches ? (curX = Math.floor(t.targetTouches[0].pageX - e.left),
										curY = Math.floor(t.targetTouches[0].pageY - e.top)) : (curX = Math.floor(t.pageX - e.left),
										curY = Math.floor(t.pageY - e.top)),
										curX > maxX && (maxX = curX),
										minX > curX && (minX = curX),
										curY > maxY && (maxY = curY),
										minY > curY && (minY = curY),
										points.push({
												x: curX,
												y: curY
										}),
										onPaint(),
										lastX = curX,
										lastY = curY,
										preventDefault(t)
								}
						}
						,
						tmp_canvas.ontouchend = function() {
								isCopyingImg = !0,
								isDown = !1;
								var t = document.getElementById("anysignCanvas")
									, e = t.getContext("2d");
								e.drawImage(tmp_canvas, 0, 0),
								tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height),
								points = [],
								isCopyingImg = !1
						}
						,
						tmp_canvas.ontouchcancel = tmp_canvas.ontouchend) : (tmp_canvas.onmousedown = function() {
								isDown = !0
						}
						,
						tmp_canvas.onmousemove = function(t) {
								if (isDown) {
										var e = JQuery_Capable.offset(t.target)
											, n = document.body.scrollTop | document.documentElement.scrollTop
											, a = document.body.scrollLeft | document.documentElement.scrollLeft;
										"undefined" != typeof t.targetTouches ? (curX = Math.floor(t.targetTouches[0].clientX - e.left),
										curY = Math.floor(t.targetTouches[0].clientY - e.top)) : (curX = Math.floor(t.clientX - e.left),
										curY = Math.floor(t.clientY - e.top)),
										curY += n,
										curX += a,
										curX > maxX && (maxX = curX),
										minX > curX && (minX = curX),
										curY > maxY && (maxY = curY),
										minY > curY && (minY = curY),
										points.push({
												x: curX,
												y: curY
										}),
										onPaint(),
										preventDefault(t)
								}
						}
						,
						tmp_canvas.onmouseup = function() {
								isDown = !1;
								var t = document.getElementById("anysignCanvas")
									, e = t.getContext("2d");
								e.drawImage(tmp_canvas, 0, 0),
								tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height),
								points = []
						}
						,
						tmp_canvas.onmouseout = tmp_canvas.onmouseup);
						{
								window.devicePixelRatio ? window.devicePixelRatio : 1
						}
						e.strokeStyle = "black",
						e.lineWidth = base_stroke_width,
						e.lineCap = "round",
						e.lineJoin = "round",
						e.shadowBlur = 5,
						tmp_ctx.strokeStyle = "black",
						tmp_ctx.lineWidth = base_stroke_width,
						tmp_ctx.lineCap = "round",
						tmp_ctx.lineJoin = "round",
						tmp_ctx.shadowBlur = 5
				} else
						alert("你的浏览器不支持canvas标签,请使用firefox和chrome浏览器")
		}
		function getWindowWidth() {
				var t = 630
					, e = 460;
				return document.body && document.body.offsetWidth && (t = document.body.offsetWidth,
				e = document.body.offsetHeight),
				"CSS1Compat" == document.compatMode && document.documentElement && document.documentElement.offsetWidth && (t = document.documentElement.offsetWidth,
				e = document.documentElement.offsetHeight),
				window.innerWidth && window.innerHeight && (t = window.innerWidth,
				e = window.innerHeight),
				t
		}
		function getWindowHeight() {
				var t = 630
					, e = 460;
				return document.body && document.body.offsetWidth && (t = document.body.offsetWidth,
				e = document.body.offsetHeight),
				"CSS1Compat" == document.compatMode && document.documentElement && document.documentElement.offsetWidth && (t = document.documentElement.offsetWidth,
				e = document.documentElement.offsetHeight),
				window.innerWidth && window.innerHeight && (t = window.innerWidth,
				e = window.innerHeight),
				e
		}
		function clear_canvas() {
			var t = document.getElementById("anysignCanvas")
				, e = t.getContext("2d");
			e.clearRect(0, 0, t.width, t.height),
			e.closePath();
			var n = t.width
				, a = t.height;
			t.width = t.height = 0,
			t.width = n,
			t.height = a,
			points = [],
			minX = 9999,
			minY = 9999,
			maxX = 0,
			maxY = 0,
			imageDataTmp = null,
			isDrawn = !1
	}
		</script>
  </body>
</html>
